<template>
	<view class="hx-store">
		<hx-navbar 
		    :fixed="true"
		    :color="['#ffffff','#888888']"
		    barPlaceholder="hidden"
		    transparent="auto"
			:back="false" 
			:rightSlot="false"
		    :background-color="[245,245,245]"
			:pageScroll.sync="pageScroll">
			<block slot="left">
				<view class="" style="margin-left: 6px; font-size: 22px;" @click="navBack">
					<i class="hxicon-back"></i>
				</view>
			</block>
		</hx-navbar>

		<!-- 头部 -->
		<view class="header">
			<image v-if="dianpuData.banner && dianpuData.banner.length === 0" class="header-bg" :src="banner" mode="aspectFill"></image>
			<sh-banner v-else height="430" :list="dianpuData.banner"></sh-banner>

			<!-- <view class="header-bg-black"></view> -->
			<!-- <view class="header-top-Placeholder"></view> -->
			<view class="container storeInfo hx-shadow" :style="{height:storeInfoBoxHeight + 'px'}">
				<image class="storeAvatar hx-shadow" :src="dianpuData.member ? dianpuData.member.avatar : ''" mode=""></image>
				<view class="hx-txt-18 hx-color-black hx-txt-weigth hx-mb-10">{{ dianpuData.name }}</view>
				<view class="hx-txt-14 hx-color-black ">{{ dianpuData.company_name }}</view>
				<view class="shrink-box"><i class="hxicon icon-unfold"></i></view>
			</view>
		</view>

		<!-- 主体 -->
		<view class="main" :style="{height: mainHeight}" >
			<view class="tabs-box" :style="{'top': 'calc(44px + ' + statusBarHeight + 'px)','background-color':'rgba(245,245,245,'+ navSearchBgOpacity +')'}">
				<view class="" style="width: 280px; height: 100%;">
					<view class="hx-tabs">
						<view class="hx-tabs-item" v-for="(item,i) in tabs" :key="i" :class="{'hx-tabs-active': swiperCurrent == i}" @click="swiperChange(i)" :style="{transition: transtionTime + 'ms'}">
							<text>{{item.name}}</text>
						</view>
						<view class="hx-tabs-slider-box" :style="{transition: transtionTime + 'ms',left:swiperCurrentSliderLeft + 'px'}">
							<view class="hx-tabs-slider"></view>
						</view>
					</view>
				</view>
			</view>
			<swiper id="mainSwiper" style="height: 100%;"
				:current="swiperCurrent" 
				:duration="transtionTime"
				@animationfinish="animationfinish">

				<!-- 购物 -->
				<swiper-item class="swiper-item" >
					<scroll-view scroll-y style="height: 100%;width: 100%;background-color: #ffffff;" @scroll="asideScroll" :scroll-y="goodsBoxScroll" >
						<view class="scroll-items evaluate-box" >
							
							<view class="template-box">
								<block v-for="(item, index) in dianpuTemplate" :key="item.id">
									<!-- 轮播 -->
									<sh-banner
										v-if="item.type === 'banner' && index !== 0"
										:Px="item.content.x"
										:Py="item.content.y"
										:borderRadius="item.content.radius"
										:height="item.content.height"
										:list="item.content.list"
									></sh-banner>
							
									<!-- 搜索 -->
									<sh-search v-if="item.type === 'search'"></sh-search>
							
									<!-- 滑动宫格 -->
									<sh-grid-swiper v-if="item.type === 'menu'" :list="item.content.list" :oneRowNum="item.content.style"></sh-grid-swiper>
							
									<!-- 推荐商品 -->
									<sh-hot-goods from="dianpu" v-if="item.type === 'goods-list' || item.type === 'goods-group'" :detail="item.content"></sh-hot-goods>
									<!-- 广告魔方 -->
									<sh-adv from="dianpu" v-if="item.type === 'adv'" :detail="item.content"></sh-adv>
									<!-- 优惠券 -->
									<sh-coupon from="dianpu" v-if="item.type === 'coupons'" :detail="item.content"></sh-coupon>
									<!-- 秒杀-->
									<sh-seckill from="dianpu" v-if="item.type === 'seckill'" :detail="item.content"></sh-seckill>
									<!-- 拼团 -->
									<sh-groupon from="dianpu" v-if="item.type === 'groupon'" :detail="item.content"></sh-groupon>
									<!-- 富文本 -->
									<sh-richtext from="dianpu" v-if="item.type === 'rich-text'" :richId="item.content.id"></sh-richtext>
									<!-- 功能列表 -->
									<sh-cell from="dianpu" v-if="item.type === 'nav-list'" :list="item.content.list"></sh-cell>
									<!-- 九宫格列表 -->
									<sh-grid from="dianpu" v-if="item.type === 'grid-list'" :detail="item.content.list"></sh-grid>
									<!-- 功能标题 -->
									<sh-title-card from="dianpu" v-if="item.type === 'title-block'" :title="item.content.name" :bgImage="item.content.image" :titleColor="item.content.color"></sh-title-card>
									<!-- 钱包 -->
									<sh-wallet from="dianpu" v-if="item.type === 'wallet-card'"></sh-wallet>
									<!-- 订单卡片 -->
									<sh-order-card from="dianpu" v-if="item.type === 'order-card'"></sh-order-card>
								</block>
							</view>
							
						</view>
					</scroll-view>
				</swiper-item>

				<!-- 分类 -->
				<swiper-item class="swiper-item" >
					<view class="scroll-items">
						<view class="category-list">
							<!-- 左侧分类导航 -->
							<scroll-view  :scroll-top="menuScrollTop" :scroll-y="goodsBoxScroll" class="left" >
								<view class="row" :class="{active: item.id == menuCurrentId}" v-for="item in categoryList" :key="item.id"
									@click="showCategory(item)">
									<view class="text">{{item.name}}</view>
									<view class="row-number" v-if="item.number">{{item.number}}</view>
								</view>
							</scroll-view>
							<!-- 右侧子导航 -->
							<scroll-view scroll-with-animation class="right"
								:scroll-y="goodsBoxScroll"
								:scroll-top="tabScrollTop"
								@scroll="asideScroll">
								<view class="goodsListBox">
									<view class="category" v-for="item in categoryList" :key="item.id" :id="'goodsBox'+item.id" >
										<view class="s-item">{{item.name}}</view>
										<view class="list">
											<view class="box" v-for="(rowData,i) in goodsList" :key="rowData.id" v-if="item.id == rowData.category_id">
												<!-- 商品列表 -->
												<view class="m-store-item">
													<view class="m-img" @click="jump('/pages/dianpu/goods-detail',{id: rowData.id})">
														<image style="width: 100%;height: 100%;" :src="rowData.image" mode="aspectFit"></image>
													</view>
													<view class="m-text">
														<view class="m-title" @click="jump('/pages/dianpu/goods-detail',{id:rowData.id})">{{rowData.title}}</view>
														<view class="m-descripe">{{rowData.subtitle}}</view>
														<view class="m-price-box">
															<view class="symbol">￥</view>
															<view class="m-price">{{rowData.price}}</view>
															<view class="m-old-price" v-if="rowData.original_price">
																<text>￥{{rowData.original_price}}</text>
															</view>
														</view>
														<view class="m-distance" >
															<view class="miniBtn" v-if="rowData.is_sku" @click="showForm(rowData)">
																<text>选规格</text>
																<!-- #ifdef APP-PLUS || H5 -->
																<view class="num" v-if="rowData.number">{{ rowData.number }}</view>
																<!-- #endif -->
															</view>
															<view v-else>
																<view :class="'addEle_' + i" class="jumpPosition"></view>
																<hx-number-box @change="addGoods" :value="rowData.number" :rowData="rowData" :clickTime="clickTime"></hx-number-box>
															</view>
														</view>
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>
							</scroll-view>
						</view>
					</view>
				</swiper-item>

				<!-- 评价 -->
				<swiper-item class="swiper-item" >
					<scroll-view scroll-y style="height: 100%;width: 100%;background-color: #ffffff;" @scroll="asideScroll" :scroll-y="goodsBoxScroll" >
						<view class="scroll-items evaluate-box" >
							<view class="evaluate-box-header"></view>
							<view class="evaluate-box-body"></view>
							<hx-comment :listData="commentList"></hx-comment>
						</view>
					</scroll-view>
				</swiper-item>

				<!-- 商家 -->
				<swiper-item class="swiper-item" >
					<view class="scroll-items business-box">
						<view class="info-list hx-mt-15">
							<view class="info-list-container">
								<i class="hxicon-location"></i>
								<text>{{ dianpuData.address }}</text>
							</view>
						</view>
						<!-- <view class="info-list hx-mt-15 ">
							<view class="info-list-container hx-bb">
								<i class="hxicon-time"></i>
								<text>配送时间：{{ dianpuData.delivery_time }}</text>
							</view>
						</view> -->
						<view class=" info-list">
							<view class="info-list-container" @click="callDianpu(dianpuData.phone)">
								<i class="hxicon-phone"></i>
								<text style="flex: 1;">商家电话：{{ dianpuData.phone }}</text>
								<view class="right">
									<!-- <text>拨打</text><i class="hxicon-right"></i> -->
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<!-- 购物车 -->
		<flyInCart ref="inCart" :cartBasketRect="cartBasketRect"></flyInCart>
		<view class="foot" @touchmove.stop.prevent="mpClear" :style="{height: footHeight}">
			<view class="zz" @click="hideShoppingCar"></view>
			<view class="btn-box">
				<view class="btn-box-left" @click="callDianpu(dianpuData.phone)">
					<view class="imgBox">
						<image src="../../static/store/contact.png" mode=""></image>
					</view>
					<text>联系商家</text>
				</view>
				<view class="btn-box-line"></view>
				<view class="btn-box-center" @click="showShoppingCar">
					<view class="cart">
						<view class="tag cartNum" v-if="totalNumber>0">{{totalNumber}}</view>
						<image :src="totalNumber ? '/static/store/cart.png' : '/static/store/cart2.png'" mode=""></image>
					</view>
					<view class="priceBox">
						<view class="hx-txt-18 hx-color-white" v-if="totalPrice>0">
							￥{{totalPrice}}
						</view>
						<!-- <view class="hx-txt-10 hx-color-gray">
							另需配送费￥{{shippingDees}}
						</view> -->
					</view>
				</view>
				<view class="btn-box-right">
					<view class="jiesuan" v-if="totalPrice>0 && totalPrice >= startingPrice"
						@click="jump('/pages/dianpu/jiesuan',{dianpu_id:dianpuData.id})">去结算</view>
					<view class="pscj hx-txt-10 hx-color-gray" v-else>
						<text v-if="startingPrice>0">差￥{{-(totalPrice-startingPrice)}}起送</text>
					</view>
				</view>
			</view>
			<view class="cart-box" :style="{display: showCartDetail ? 'flex' : 'none'}">
				<!-- <view class="box-container rebate-box" v-if="showDiscount">
					<text>已享100减25</text>
				</view> -->
				<view class="box-container operating-box">
					<view class="operating-box_right">
					</view>
					<view class="operating-box_left clear" @click="clearCart">
						<i class="hxicon-delete"></i>
						<text>清空购物车</text>
					</view>
				</view>
				<view class=" goods-box">
					<view class="" style="flex: 1;">
						<scroll-view scroll-y="true" class="goods-list-scroll" :scroll-top="carGoodsScrollTop">
							<view class="goods-list">
								<view class="box" v-for="(rowData,i) in cart" :key="rowData.id" v-if="rowData.number>0">
									<view class="m-store-item">
										<view class="m-img">
											<image style="width: 100%;height: 100%;" :src="rowData.image" mode="aspectFit"></image>
										</view>
										<view class="m-text">
											<view class="m-title" style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 500rpx;">
												{{ rowData.title }}
											</view>
											<view class="m-descripe">
												{{ rowData.subtitle }}
											</view>
											<view class="m-price-box" >
												<view class="symbol">￥</view>
												<view class="m-price">{{rowData.price}}</view>
												<view class="m-old-price" v-if="rowData.original_price">
													<text>￥{{rowData.original_price}}</text>
												</view>
											</view>
											<view class="m-distance" > 
											<view :class="'addEle2_' + rowData.id" class="jumpPosition">
											</view>
												<hx-number-box @change="addGoods" :value="rowData.number" :rowData="rowData" :clickTime="clickTime"></hx-number-box>
											</view>
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
		</view>

		<!-- 规格弹窗 -->
		<shop-sku v-if="showSku" v-model="showSku" :goodsInfo="currentSkuGoods" @change="addGoodsBySku"></shop-sku>

	</view>
</template>

<script>
	import shBanner from '@/pages/index/components/sh-banner.vue';
	import shGridSwiper from '@/pages/index/components/sh-grid-swiper.vue';
	import shHotGoods from '@/pages/index/components/sh-hot-goods.vue';
	import shAdv from '@/pages/index/components/sh-adv.vue';
	import shCoupon from '@/pages/index/components/sh-coupon.vue';
	import shSeckill from '@/pages/index/components/sh-seckill.vue';
	import shGroupon from '@/pages/index/components/sh-groupon.vue';
	import shRichtext from '@/pages/index/components/sh-richtext.vue';
	import shCell from '@/pages/index/components/sh-cell.vue';
	import shGrid from '@/pages/index/components/sh-grid.vue';
	import shTitleCard from '@/pages/index/components/sh-title-card.vue';
	import shOrderCard from '@/pages/index/components/sh-order-card.vue';
	import shWallet from '@/pages/index/components/sh-wallet.vue';
	import shSearch from '@/pages/index/components/sh-search.vue';
	import shCategoryTabs from '@/pages/index/components/sh-category-tabs.vue';
	
	import uniIcons from '@/components/uni-icons/uni-icons.vue';
	import hxNavbar from '@/components/hx-navbar/hx-navbar.vue';
	import hxComment from "@/components/hx-comment/hx-comment.vue";
	import flyInCart from '@/components/flyInCart.vue';
	import shopSku from './components/shopro-sku.vue';
	import hxNumberBox from "./components/uni-number-box.vue";

	import testData from "@/common/testdata.js";
	import { mapMutations, mapActions, mapState } from 'vuex';
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight;

	export default {
		components: {
			shBanner,
			hxNavbar,
			uniIcons,
			hxNumberBox,
			shopSku,
			hxComment,
			flyInCart,
			
			shGridSwiper,
			shGroupon,
			shHotGoods,
			shAdv,
			shCoupon,
			shSeckill,
			shRichtext,
			shCell,
			shGrid,
			shTitleCard,
			shWallet,
			shOrderCard,
			shSearch,
			shCategoryTabs,
		},
		data() {
			return {
				id: '',
				banner: 'http://img.zmssp.cn/Images-t1658742861484.png',
				pageScroll: {},
				pageScrollTop: 0,
				menuCurrentId: 1,
				menuScrollTop: 0,
				mainHeight: 0,
				sizeCalcState: false,
				footHeight: '0',
				touchData: {},
				dianpuTemplate: {},

				navStatus: true,
				navSearchWidth: 3,
				navSearchBgOpacity: 0,
				navSearchColor: '#ffffff',
				navHeadHeight: 44,
				
				goodsBoxScroll: false,
				statusBarHeight,
				clickTime: 100,
				storeInfoBoxHeight: 100,
				
				dx: 0,
				num: 1,
				swiperCurrent: 0,
				swiperCurrentSliderLeft: 0,
				transtionTime: 100,

				tabs: [
					{name:'购物'},
					{name:'分类'},
					{name:'评价'},
					{name:'商家'},
				],
				tabScrollTop: 0,
				
				dianpuData: [],
				categoryList: [],
				goodsList: [],
				showSku: false,
				currentSkuGoods: null,
				commentList: [],

				dianpuCartStorageName: 'dianpuCartList',
				cart: [],
				carGoodsScrollTop: 0,
				showCartDetail: false,
				totalPrice: 0,
				totalNumber: 0,

				//配送费
				shippingDees: 0,
				//配送起步价
				startingPrice: 0,
				//购物车显示折扣
				showDiscount: true,

				//购物车位置数据
				cartBasketRect: {}
			}
		},
		async onLoad(option) {
			const that = this
			that.id = option.id || 0

			//评论列表
			that.commentList = testData.commentData,
			
			that.$http('dianpu.detail', {
			    id: that.id,
			}).then(res => {
				that.dianpuData = res.data
				that.getGoodsList()
				that.getCommentList()
			});
			
			that.$http('dianpu.dptemplate', {
			    dianpu_id: that.id,
			}).then(res => {
				that.dianpuTemplate = res.data.home
			});
		},
		onShow() {
			this.initCart()
		},
		onReady() {
			const that = this
			let sysInfo = uni.getSystemInfoSync();
			//屏幕高度 - 头部导航高度 - 状态栏高度 - 分页高度
			this.mainHeight = sysInfo.screenHeight - 43 - statusBarHeight - 40  + 'px';
			let q = uni.createSelectorQuery()
			setTimeout(function(){
				q.select('.cart').boundingClientRect(data => {
				 that.cartBasketRect = data
				}).exec();
			},100)
		},
		onPageScroll(e) {
			let that = this
			let top = e.scrollTop
			that.pageScrollTop = e.scrollTop
			that.pageScroll = e

			if(top < 120){
				if(that.navSearchWidth >= 3){
					if(top<3){
						that.navSearchWidth = 3
						that.navSearchBgOpacity = 0
						that.navSearchColor = '#ffffff'
					}else{
						let n = top * (120/100)
						if(n > 100){
							n = 100
						}
						that.navSearchWidth = n
						that.navSearchBgOpacity = top * (1/100)
						that.navSearchColor = '#888888'
					}
				}
			}else{
				that.navSearchWidth = 100
				that.navSearchBgOpacity = 1
				that.navSearchColor = '#888888'
			}

			let view = uni.createSelectorQuery().select(".main");
			view.fields({
				rect: true
			}, data => {
				if(data != null){
					if(data.top <= statusBarHeight+44){
						that.goodsBoxScroll = true
					}else{
						that.goodsBoxScroll = false
					}
				}
			}).exec();
		},

		methods: {
			getGoodsList() {
				let that = this;
				uni.showLoading({title: '加载中'});
				that.$http('dianpu.goodslist', {
				    dianpu_id: that.id
				}).then(res => {
					uni.hideLoading();
				    if (res.code === 1) {
						that.categoryList = [...that.categoryList, ...res.data.categoryList];
						that.goodsList = [...that.goodsList, ...res.data.goodsList];
						that.initCart();
				    }
				});
			},
			getCommentList() {
				let that = this;
				that.$http('dianpu.commentlist', {
				    dianpu_id: that.id
				}).then(res => {
				    if (res.code === 1) {
				    }
				});
			},
			initCart() {
				let that = this;
				let cart = that.getCart();
				that.cart = cart;
				that.calcCart();
				that.syncGoodsNumber();
				that.syncCategoryNumber();
			},
			getCart() {
				let carts = uni.getStorageSync(this.dianpuCartStorageName);
				if (!carts) {
					carts = [];
				}
				for(let i in carts){
					if(carts[i].dianpu_id == parseInt(this.dianpuData.id)){
						return carts[i].cart;
					}
				}
				return [];
			},
			storeCart(cart) {
				this.cart = cart
				let matchIdx = 0
				let carts = uni.getStorageSync(this.dianpuCartStorageName) || []
				for(let i in carts){
					if(carts[i].dianpu_id == parseInt(this.dianpuData.id)){
						matchIdx = i
						break
					}
					matchIdx++
				}
				carts[matchIdx] = {dianpu_id: parseInt(this.dianpuData.id), cart: cart}
				uni.setStorageSync(this.dianpuCartStorageName, carts)
			},
			calcCart() {
				let totalNumber = 0;
				let totalPrice = 0;
				this.cart.forEach(item=>{
					totalNumber += item.number
					totalPrice += item.total_price
				})
				this.totalNumber = totalNumber
				this.totalPrice = totalPrice.toFixed(2)
			},
			clearCart(){
				this.storeCart([])
				this.calcCart()
				this.syncGoodsNumber()
				this.syncCategoryNumber()
				this.hideShoppingCar()
			},
			syncGoodsNumber() {
				let cart = this.cart
				let goods = this.goodsList
				for(let j in goods){
					let n = 0
					for(let i in cart){
						if(goods[j].id == cart[i].goods_id){
							n += cart[i].number
						}
					}
					goods[j].number = n
				}
				this.goodsList = goods
			},
			syncCategoryNumber() {
				let cart = this.cart
				let category = this.categoryList
				for(let j in category){
					let n = 0
					for(let i in cart){
						if(category[j].id == cart[i].category_id){
							n += cart[i].number
						}
					}
					category[j].number = n
				}
				this.categoryList = category
			},

			navBack(){
				if(getCurrentPages().length>1){
					uni.navigateBack();
				}else{
					// #ifdef H5
					history.back()
					// #endif
					// #ifndef H5
					uni.reLaunch({
						url: '/pages/index/index'
					});
					// #endif
				}
			},

			//显示 规格
			showForm(goods){
				this.currentSkuGoods = goods
				this.showSku = true
			},

			swiperChange(index) {
				this.swiperCurrent = index;
				this.swiperCurrentSliderLeft= 70 * index;
			},

			animationfinish({detail: { current }}) {
				this.swiperCurrent = current;
				this.swiperChange(current);
			},
			showCategory(item){
				const that = this
				if(that.goodsBoxScroll){
				}
				that.goodsBoxScroll = true
				that.calcSize().then((res)=>{
					that.menuCurrentId = item.id;
					let index = that.categoryList.findIndex(sitem=>sitem.id === item.id);
					that.tabScrollTop = that.categoryList[index].top+1;
					setTimeout(()=>{
						that.goodsBoxScroll = false
					},100)
				})
			},
			calcSize(){
				const that = this
				return new Promise(function(resolve,reject){
					let h = 0;
					that.categoryList.forEach(item=>{
						let view = uni.createSelectorQuery().select("#goodsBox" + item.id);
						view.fields({
							size: true
						}, data => {
							if(data != null){
								item.top = h;
								h += Math.round(data.height);
								item.bottom = h;
							}
						}).exec();
					})
					resolve(true)
					that.sizeCalcState = true;
				})
			},

			//右侧栏滚动
			asideScroll(e){
				const that = this;
				const scrollTop = Math.round(e.detail.scrollTop);
				const tabs = that.categoryList.filter(item=>item.top <= scrollTop).reverse();

				if(tabs.length > 0){
					that.menuCurrentId = tabs[0].id;
				}
				const menuNum = that.categoryList.length
				const cNum = tabs.length
				// 定位在第4个分类，当分类滑动到第4格时将不再变换位置。
				const n = 4
				if(cNum>n){
					that.menuScrollTop = (cNum - n) * 45
				}else{
					that.menuScrollTop = 0
				}
			},

			//新增商品计算价格
			addGoods(number,goodsData,skuPrice){
				let that = this;
				let cart = that.cart;
				let matchCartIdx = 0;
				for (let i in cart) {
					if (cart[i].goods_id == goodsData.id && (!goodsData.is_sku || cart[i].goods_sku_price_id == skuPrice.id)) {
						matchCartIdx = i;
						break;
					}
					matchCartIdx++;
				}
				if (parseInt(number) > 0) {
					cart[matchCartIdx] = {
						raw: goodsData,
						number: parseInt(number),
						goods_id: goodsData.id,
						category_id: goodsData.category_id,
						title: goodsData.title,
						subtitle: goodsData.is_sku ? skuPrice.goods_sku_text : goodsData.subtitle,
						price: goodsData.is_sku ? skuPrice.price : goodsData.price,
						original_price: goodsData.original_price,
						goods_sku_price_id: goodsData.is_sku ? skuPrice.id : goodsData.sku_price[0].id,
						image: (goodsData.is_sku && skuPrice.image) ? skuPrice.image : goodsData.image,
						total_price: parseFloat(((parseFloat(goodsData.is_sku ? skuPrice.price : goodsData.price) * parseInt(number))).toFixed(2))
					}
				}
				if (parseInt(number) == 0 && cart[matchCartIdx]) {
					cart.splice(matchCartIdx, 1)
				}

				that.storeCart(cart)
				that.calcCart()
				that.syncGoodsNumber()
				that.syncCategoryNumber()
			},
			addGoodsBySku(number, skuPrice) {
				this.addGoods(number, this.currentSkuGoods, skuPrice)
			},

			jump(path, parmas) {
				this.$Router.push({
					path: path,
					query: parmas
				});
			},

			//显示购物车
			showShoppingCar(){
				if(this.totalNumber == 0){
					return;
				}
				this.footHeight = '100%';
				this.showCartDetail = true;
				this.carGoodsScrollTop = 0;
			},
			//隐藏购物车
			hideShoppingCar(){
				this.footHeight = '0';
				this.showCartDetail = false;
			},

			mpClear(e) {
				e.stopPropagation()
			},

			callDianpu(phone){
				if(!phone){
					return;
				}
				uni.makePhoneCall({
				    phoneNumber: phone //仅为示例
				});
			}
		}
	}
</script>

<style lang="scss">
	//主题颜色
	$hx-theme-color: #FFC107;
	$hx-theme-color-light: #FFEB3B;
	
	.add{
		position: fixed;
		right: 60upx;
		top: 300upx;
		z-index: 999;
	}
	.ctn{

		/* border: 1px solid #e3e3e3; */
		width: 100%;
		display: flex;
		justify-content: flex-end;
		overflow: hidden;
		align-items: center;
		.searchCtn{
			display: flex;
			border-radius: 80upx;
			padding: 8upx 12upx;
			line-height: 44upx;
			background: #e0e0e0;
			overflow: hidden;
			align-items: center;
			min-width: 22px;
		}
		.leftBox{
			display: flex;
			width: 53px;
			justify-content: space-between;
			flex: none;
			margin: 0 8px;
		}
		.jrNull{
			/* #ifdef MP */
			width: 95px;
			flex: none;
			/* #endif */
		}
	}

	page{
		background: #ffffff;
	}
	.hx-bb{
		border-bottom: 1px solid $uni-border-color;
	}
	.hx-txt-10{
		font-size: 10px;
	}
	.hx-txt-12{
		font-size: 12px;
	}
	.hx-txt-14{
		font-size: 14px;
	}
	.hx-txt-16{
		font-size: 16px;
	}
	.hx-txt-18{
		font-size: 18px;
	}
	.hx-txt-22{
		font-size: 22px;
	}
	.hx-color-gray{
		color: #bbbbbb;
	}
	.hx-color-white{
		color: #FFFFFF;
	}
	.hx-color-black{
		color: #333333;
	}
	.hx-txt-weigth{
		font-weight: bold;
	}
	.hx-mb-10{
		margin-bottom: 10px;
	}
	.hx-mt-15{
		margin-top: 15px;
	}
	.hx-shadow{
		box-shadow: 0px 6upx 16upx rgba(173, 173, 173, 0.2);
	}
	.miniBtn{
		position: relative;
		padding: 0 12px;
		border-radius: 20px;
		height: 24px;
		line-height: 24px;
		text-align: center;
		background: linear-gradient(100deg, #FFEB3B, #FFC107);
		font-size: 10px;
		color: #333;
		.num{
			position: absolute;
			right: 0;
			top: -10px;
			width: 18px;
			height: 18px;
			line-height: 18px;
			font-size: 10px;
			color: #fff;
			background-color: #ff5722;
			text-align: center;
			border-radius: 50%;
			
		}
	}
	.hx-store{
		.header{
			position: relative;
			min-height: 230px;
			&-bg{
				// position: absolute;
				// left: 0;
				// top: 0;
				// z-index: 2;
				width: 100%;
				height: 142px;
			}
			&-bg-black{
				position: absolute;
				left: 0;
				top: 142px;
				bottom: 0;
				z-index: 1;
				background-color: #ffffff;
				width: 100%;
				transition: background-color 0.2s;
			}
			&-bg-gray{
				position: absolute;
				left: 0;
				top: 142px;
				bottom: -16px;
				z-index: 1;
				background-color: #afafaf;
				width: 100%;
				transition: background-color 0.2s;
			}
			&-top-Placeholder{
				height: 105px;
			}
			.storeInfo{
				position: relative;
				z-index: 2;
				background: #ffffff;
				height: 100px;
				border-radius: 6px;
				padding: 12px;
				margin-bottom: 4px;
				transition: all 0.2s;
				.shrink-box{
					position: absolute;
					bottom: 0;
					left: 0;
					right: 0;
					text-align: center;
					font-size: 20px;
					color: #a2a8ab;
				}
				.storeAvatar{
					position: absolute;
					width: 50px;
					height: 50px;
					right: 16px;
					top: -25px;
					background: #ffffff;
					border-radius: 4px;
					
				}
			}
		}
		.container{
			margin: 0 32upx;
		}
		.tabs-box{
			width: 100%;
			position: sticky;
			top: calc(44px + var(--status-bar-height));
			z-index: 10;
			background-color: white;
			border-bottom: 1px solid #efefef;
			height: 40px;
			
			.hx-tabs{
				position: relative;
				display: flex;
				height:100%;
				&-item{
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					width: 70px;
					color:#666666;
					text{
						font-size: 16px;
					}
					
				}
				&-active{
					color:#333333;
					font-weight: bold;
				}
				&-slider-box{
					position: absolute;
					display: flex;
					justify-content: center;
					bottom: 0;
					width: 70px;
				}
				&-slider{
					display: flex;
					background: #f6d200;
					width: 30px;
					height: 3px;
				}
			}
		}
		.main{
			position: relative;
			background-color: #ffffff;
			
			#mainSwiper{
				background-color: #eeeeee;
				position: sticky;
				top: calc(40px + 44px + var(--status-bar-height));
				.scroll-items{
					// 商品列表样式
					.category-list{
						width: 100%;
						background-color: #fff;
						display: flex;
						padding-bottom: 50px;
						
						.left,.right{
							background: #fff;
							position: absolute;
							top:0;
							bottom: 0upx;
						}
						.left{
							width: 24%;
							left: 0upx;
							background-color: #f6f3f3;
							
							.row{
								width: 100%;
								height: 45px;
								display: flex;
								align-items: center;
								overflow: hidden;
								position: relative;
								.text{
									width: 100%;
									font-size: 14px;
									color:#999999;
									overflow: hidden;
									text-overflow: ellipsis;
									display: -webkit-box;
									-webkit-box-orient: vertical;
									-webkit-line-clamp: 2;
									text-align: center;
									padding: 0 16px;
								}
								&-number{
									position: absolute;
									width: 18px;
									height: 18px;
									right: 4px;
									top: 4px;
									background: #ff5722;
									border-radius: 50%;
									line-height: 18px;
									text-align: center;
									font-size: 10px;
									color: #ffffff;
								}
								&.active{
									height: 45px;
									background-color: #fff;
									.text{
										font-size: 14px;
										
									}
								}
							}
							.row:last-child{
								margin-bottom: 200upx;
							}
						}
						.right{
						   width: 76%;
							left: 24%;
							.goodsListBox{
								padding-bottom: 100px;
								.category{
									padding: 0 15px 10px 15px;
									.s-item{
										height: 45px;
										line-height: 45px;
										font-size: 16px;
										background: #ffffff;
										color: #555555;
										position: sticky;
										top: 0;
										z-index: 18;
									}
									.list:last-child{
										margin-bottom: 0;
									}
									.list{
										margin-bottom: 20px;
										width: 100%;
										display: flex;
										flex-wrap: wrap;
										.box:first-child{
											.m-store-item{
												margin-top: 0;
											}
										}
										.box{
											width: 100%;
											
											.m-store-item{
												display: flex;
												flex-direction: row;
												width: 100%;
												justify-content: space-between;
												align-items: flex-end;
												margin-top: 15px;
												margin-bottom: 15px;
												.m-img{
													flex: 0 0 85px;
													height: 85px;
													background: #eee;
													border-radius: 4px;
												}
												.m-text{
													flex: 1;
													position: relative;
													height: 85px;
													padding: 0 6px;
													display: flex;
													align-content: space-between;
													flex-direction: column;
													.m-title{
														font-size: 16px;
														color:#555555;
														height: 21px;
														font-weight: bold;
														overflow: hidden;
													}
													.m-descripe{
														font-size: 12px;
														color:#999999;
														margin-top: 5px;
														height: 35px;
														overflow: hidden;
													}
													.m-price-box{
														height: 24px;
														font-weight: bold;
														display: flex;
														flex-direction: row;
														align-items: flex-end;
														.symbol{
															color:#ff582b;
															font-size: 12px;
														}
														.m-price{
															position: relative;
															top: 2px;
															font-size: 18px;
															color:#ff582b;
														}
														.m-old-price{
															margin-left: 3px;
															display: flex;
															flex-direction: row;
															font-size: 10px;
															color:#999999;
															margin-top: 5upx;
															text-decoration: line-through;
															font-weight: normal;
														}
													}
													.m-distance{
														position: absolute;
														right: 0;
														bottom: -4px;
														z-index: 16;
														color:#b2b2b2;
														font-size: 20upx;
														text-align: right;
														.jumpPosition{
															position: absolute; 
															bottom: 23px;
															right: 0;
															z-index: 2;
															width: 28px;
															height: 28px;
														}
													}
													
												}
												
											}
										}
									}
								}
							}
						}
					}
				}
				.evaluate-box{
					
				}
				.business-box{
					
					.info-list{
						background: #ffffff;
						padding: 0 15px;
						&-container{
							line-height: 46px;
							height: 46px;
							display: flex;
							flex-direction: row;
							[class*="hxicon-"]{
								color: #a2a2a2;
								margin-right: 8px;
							}
							text{
								font-size: 14px;
							}
							.right{
								
								float: right;
								color: #dddddd;
								display: flex;
								flex-direction: row;
								align-items:center;
								[class*="hxicon-"]{
									color: #dddddd;
									margin-right: 0;
									font-size: 16px;
								}
							}
						}
						
					}
				}
			}
			
		}
		.foot{
			position: fixed;
			display: flex;
			z-index: 999;
			
			justify-content:center;
			align-items : center; 
			bottom: 0;
			height: 100%;
			width: 100%;
			
			/*width: calc(100% - 32px);*/
			.btn-box{
				position:absolute;
				display: flex;
				bottom: 15px;
				justify-content:center;
				align-items : center; 
				margin:0;
				height: 50px;
				width: calc(100% - 32px);
				z-index: 9;
				&-left{
					background: #222222;
					border-top-left-radius:50px;
					border-top-right-radius:9px;
					border-bottom-left-radius:50px;
					border-bottom-right-radius:9px;
					padding-left: 6upx;
					display: flex;
					flex-direction:column;
					justify-content:center;
					align-self: center;
					width: 70px;
					height: 100%;
					color: #f6d200;
					text-align: center;
					.imgBox{
						display: flex;
						text-align: center;
						justify-content:center;
						image{
							width: 20px;
							height: 20px;
						}
					}
					text{
						font-size: 20upx;
					}
				}
				&-line{
					background: #ffffff;
					width: 2px;
					height: 100%;
				}
				&-center{
					height: 100%;
					flex: auto;
					display: flex;
					justify-content:flex-start;
					align-self: center;
					align-items: center;
					background: #222222;
					border-top-left-radius:8upx;
					border-bottom-left-radius:8upx;
					padding-left: 10upx;
					.cart{
						position: relative;
						width: 36px;
						height: 36px;
						image{
							width: 100%;
							height: 100%;
						}
						.tag{
							position: absolute;
							right: 12upx;
							top: 16upx;
							height: 18px;
							width: 18px;
							background-color: #ff4000;
							color: #ffffff;
							border-radius: 50%;
							z-index: 1;
							font-size: 10px;
							text-align: center;
							line-height: 18px;
						}
					}
					.priceBox{
						flex: auto;
					}
					
				}
				&-right{
					width: 70px;
					height: 100%;
					position: relative;
					display: flex;
					justify-content:flex-start;
					align-self: center;
					align-items: center;
					
					
					.pscj{
						width: 100%;
						height: 100%;
						border-top-right-radius:100upx;
						border-bottom-right-radius:100upx;
						background: #222222;
						text-align: center;
						display: flex;
						justify-content:center;
						align-self: center;
						align-items: center;  
					}
					.jiesuan{
						width: 100%;
						height: 100%;
						font-size: 28upx;
						border-top-right-radius:100upx;
						border-bottom-right-radius:100upx;
						text-align: center;
						display: flex;
						justify-content:center;
						align-self: center;
						align-items: center;    
						background: linear-gradient(45deg, $hx-theme-color-light, $hx-theme-color); 
						font-weight: bold;
						color: #222222;
					}
				}
			}
			.zz{
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background-color: rgba(0,0,0,.7);
				z-index: 1;
			}
			.cart-box{
				display: flex;
				justify-content: flex-start;
				flex-flow: column;
				background: #ffffff;
				position: absolute;
				bottom: 0; 
				z-index: 2;
				max-height: 66%;
				
				padding-bottom: 62px;
				border-top-left-radius: 16px;
				border-top-right-radius: 16px;
				overflow: hidden;
				width: 100%;
				.rebate-box{
					height: 30px;
					background: #FFC107;
					color: #FF9900;
					text-align: center;
					line-height: 30px;
					font-size: 14px;
				}
				.box-container{
					box-sizing: border-box;
					padding:0 16px;
				}
				.operating-box{
					font-size: 12px;
					line-height: 40px;
					height: 40px;
					border-bottom: 1px solid #f6f6f6;
					color: #666666;
					display: flex;
					flex-direction: row;
					&_right{
						flex: 1;
					}
					&_left{
						display: flex;
						flex-direction: row;
					}
					
				}
				.goods-box{
					height: 100%;
				    overflow: hidden;
					flex: 1;
					display: flex;
					.goods-list-scroll{
						height: 100%;
						
						.goods-list{
							
							width: 100%;
							display: flex;
							flex-wrap: wrap;
							
							.box{
								width: 100%;
								border-bottom: 1px solid #f6f6f6;
								box-sizing: border-box;
								padding: 0 16px;
								.m-store-item{
									display: flex;
									flex-direction: row;
									width: 100%;
									justify-content: space-between;
									align-items: flex-end;
									padding-top: 15px;
									padding-bottom: 15px;
									.m-img{
										flex: 0 0 85px;
										height: 85px;
										background: #eee;
										border-radius: 4px;
									}
									.m-text{
										flex: 1;
										position: relative;
										height: 85px;
										padding: 0 6px;
										display: flex;
										align-content: space-between;
										flex-direction: column;
										.m-title{
											font-size: 16px;
											color:#555555;
											height: 21px;
											font-weight: bold;
										}
										.m-descripe{
											font-size: 12px;
											color:#999999;
											margin-top: 5px;
											height: 35px;
										}
										.m-price-box{
											height: 24px;
											font-weight: bold;
											display: flex;
											flex-direction: row;
											align-items: flex-end;
											.symbol{
												color:#ff582b;
												font-size: 12px;
											}
											.m-price{
												position: relative;
												top: 2px;
												font-size: 18px;
												color:#ff582b;
											}
											.m-old-price{
												margin-left: 3px;
												display: flex;
												flex-direction: row;
												font-size: 10px;
												color:#999999;
												margin-top: 5upx;
												text-decoration: line-through;
												font-weight: normal;
											}
										}
										.m-distance{
											position: absolute;
											right: 0;
											bottom: -4px;
											z-index: 16;
											color:#b2b2b2;
											font-size: 20upx;
											text-align: right;
											.jumpPosition{
												position: absolute; 
												bottom: 23px;
												right: 0;
												z-index: 2;
												width: 28px;
												height: 28px;
											}
										}
										
									}
									
								}
							}
						}
					}
				}
			}
		}
	}
	.form-main{
		
		display: flex;
		flex-direction: column;
		justify-content: left;
		padding: 15px;
		
		.form-main_ctn{
			display: flex;
			flex-direction: column;
			justify-content: left;
			padding: 23px 22px 22px 22px;
			background-color: #fff;
			border-radius: 8px;
			.godos_tit{
				margin-top: 4px;
				margin-bottom: 6px;
				font-size: 18px;
				font-weight: bold;
				color: #333; 
			}
			.gg_tit{
				margin-top: 8px;
				font-size: 14px;
				font-weight: bold;
				color: #555;
			}
			.gg_box{
				margin-top: 8px;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				font-size: 12;
				color: #333;
				.item{
					margin-right: 14px;
					margin-bottom: 14px;
					border: 1px solid #f1f1f1;
					border-radius: 4px;
					padding: 4px 6px;
				}
				.item.active{
					border-color: #ffe081;
					background-color: #fff0b7;
				}
				
			}
			.select_gg{
				margin: 26px -12px 0;
				padding: 6px 12px;
				color: #999;
				background-color: #f9f9f9;
				display: flex;
				flex-direction: row;
				.lable{
					
				}
				.select_gg_box{
					flex: 1;
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					.gg-item{
						color: #333;
						.gg-item-cut{
							margin-left: 3px;
							margin-right: 3px;
						}
					}
					.gg-item:last-child{
						.gg-item-cut{
							display: none;
						}
					}
				}
				
			}
			.bottom{
				position: relative;
				display: flex;
				flex-direction: row;
				margin-top: 12px;
				.price_box{
					flex: 1;
					lign-items: baseline;
					color: #ff582b;
					font-size: 14px;
					position: relative;
					top: 4px;
					.price{
						font-size:  24px;
					}
				}
				.jumpPosition{
					position: absolute;
					right: 16px;
					top: 2px;
				}
				.form-btn-box{
					height: 30px;
					line-height: 30px;
					.add-btn{
						border-radius: 50px;
						background-color: #ffce3c; 
						padding: 0 12px;
						display: flex;
						height: 30px;
						line-height: 30px;
						align-items: center;
						i{
							font-weight: bold;
							font-size: 18px;
							margin-right: 3px;
							margin-left: -4px;
						}
						text{
							
							font-size: 14px;
							font-weight: bold;
							color: #363636;
						}
					}
				}
			}
			
		}
		
		.close{
			position: absolute;
			left: 50%;
			margin-left: -20px;
			bottom: -70px;
			border-radius: 50%;
			height: 40px;
			width: 40px;
			background-color: #fff;
			opacity: 0.7;
			text-align: center;
			line-height: 43px;
			i{
				font-weight: bold;
				font-size: 22px;
			}
		}
	}
</style>
